<template>
	<view>
		<navbar></navbar>
		<view class="container">
			<view class="card">
				<view class="user">
					<view class="userdata">
						<view class="userPhoto">
							<img :src="user_img" alt="">
						</view>
						<view class="userPhone">
							{{user_name}}
						</view>
					</view>
					<view class="invitation">
						实名：
						<view class="num">
							{{userInfo.real_count}}
						</view>
					</view>
				</view>
				<view style="margin-top: 30rpx;">
					邀请总数：{{userInfo.inviter_count}}人
				</view>
				<view>
					消费用户：{{userInfo.xd_count}}人
				</view>
			</view>
			<view class="List">
				<view class="title">
					排行榜
				</view>
				<view class="data">
					{{time}}
				</view>
				<view class="item_title">
					<view style="display: flex;margin-left: 22rpx;">
						<view>
							排行
						</view>
						<view style="margin-left: 88rpx;">
							手机号
						</view>
					</view>

					<view style="width: 154rpx;">
						积分
					</view>
				</view>
				<view class="item" v-for="(item,index) in topList" :key="index" :class="index == topList.length - 1 ? '' : 'border'">
					<view class="box">
						<view class="index">
							<img v-if="index == 0" src="@/static/images/Ranking/no1.png" alt="">
							<img v-else-if="index == 1" src="@/static/images/Ranking/no2.png" alt="">
							<img v-else-if="index == 2" src="@/static/images/Ranking/no3.png" alt="">
							<view v-else>
								{{index + 1}}
							</view>
						</view>
						<view class="phone">
							{{item.phone}}
						</view>
					</view>
					<view class="num">
						{{item.jifen}}分
					</view>
				</view>
			</view>
			
			<view class="Rule">
				<!-- 活动文本 -->
				<view>
				<!-- 写这里!! -->
				</view>
				<view class="text">
					感谢参加此次活动
				</view>
				<view class="end">
					<view class="">
						@2022 比特艺术
					</view>
					<view class="icon">
						<img src="@/static/images/Ranking/endIcon.png" alt="">
					</view>
					<view class="endLanguage">
						数字艺术
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import navbar from "@/components/navbar/navbar";
	export default {
		components: {
			navbar
		},
		data() {
			return {
				user_name: uni.getStorageSync('userInfo').nickName,
				user_img: uni.getStorageSync('userInfo').avatarUrl,
				user_id: uni.getStorageSync('userInfo').user_id,
				loading: false,
				hasMore: false,
				topList: [],
				time: '',
				userInfo: {},
				
			}
		},
		onPullDownRefresh: function() {
			// this.getPageData(function () {
			uni.stopPullDownRefresh();
			// });
		},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {},
		onLoad() {
			this.getPageData();
		},
		methods: {
			//获取数据
			getPageData() {
				let _this = this
				app._post_form('nft/getPullNewTop', {
					user_id: _this.user_id
				}, (result) => {
					_this.topList = result.data.topList
					_this.userInfo = result.data.userInfo
					_this.time = result.data.time
				}, false, () => {});
			}
		}

	}
</script>

<style lang="scss" scoped>
	.border {
		border-bottom: 1rpx solid rgba(255, 255, 255, 0.1000);
	}

	.container {
		box-sizing: border-box;
		min-height: 100vh;
		padding: 15rpx 30rpx;
		background: rgba(0, 0, 0, 0.9000);

		.List {
			// width: 100%;
			// height: 1415rpx;
			margin-top: 30rpx;
			background-color: #39393B;
			border-radius: 15rpx;
			color: #FFD665;
			padding: 60rpx 34rpx;
			padding-bottom: 20rpx;
			text-align: center;

			.title {

				font-size: 60rpx;
				font-weight: bold;
				color: #FFD665;
			}

			.data {
				margin-top: 20rpx;
			}

			.item_title {
				margin-top: 56rpx;
				display: flex;
				justify-content: space-between;
				font-size: 24rpx;
				font-weight: 500;
				color: #CAAE7F;
			}

			.item {
				margin-top: 25rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 24rpx;
				font-weight: 500;
				color: #CAAE7F;
				height: 70rpx;
				padding-bottom: 25rpx;

				.box {
					display: flex;
					align-items: center;

					.index {
						margin-right: 80rpx;
						width: 78rpx;
						height: 58rpx;
						line-height: 62rpx;

						// background: url('@/static/images/Ranking/no3.png');
						img {
							width: 100%;
							height: 100%;
						}
					}
				}

				.num {
					width: 154rpx;
					text-align: center;
				}
			}
		}

		.card {
			box-sizing: border-box;
			margin-top: 30rpx;
			height: 253rpx;
			background-color: #39393B;
			border-radius: 15rpx;
			font-size: 26rpx;
			font-weight: 500;
			color: #CAAE7F;
			padding: 30rpx 58rpx;
			text-align: center;

			.user {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.userdata {
					display: flex;
					align-items: center;

					.userPhoto {
						width: 92rpx;
						height: 92rpx;

						img {
							width: 100%;
							height: 100%;
							border-radius: 50%;
							background: #fff;
						}
					}

					.userPhone {
						margin-left: 30rpx;
					}
				}

				.invitation {
					display: flex;
					align-items: center;

					.num {
						font-size: 50rpx;
						font-weight: bold;
						color: #FFCF80;
					}
				}
			}
		}

		.Rule {
			font-size: 26rpx;
			font-weight: 500;
			color: rgba(255, 255, 255, 0.9000);
			padding: 100rpx 58rpx;
			padding-bottom: 0;
			text-align: center;
			.text{
				margin-top: 44rpx;
				font-size: 30rpx;
				font-weight: 200;
				color: rgba(255,255,255,0.9000);
			}
			.end{
				margin: 80rpx 0; 
				font-size: 24rpx;
				font-weight: 500;
				color: rgba(255,255,255,0.3000);
				.icon{
					width: 164rpx;
					height: 76rpx;
					margin: 6rpx auto;
					img{
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
</style>
